<template>
    <div class="news">
        <ul>
            <li v-for="(news, index) in newsList" :key="news.id">
                <button @click="showDetail(news)">查看</button>
                <RouterLink 
                :to="{
                    name:'MyDetail',
                    params:{
                        id:news.id,
                        title:news.title,
                        content:news.content,
                    }
                }">
                {{news.title}}
                </RouterLink>

            </li>
        </ul>
        <div class="news-content">
            <router-view></router-view>
        </div>

    </div>
</template>

<script setup lang="ts" name="News">
    import { reactive } from 'vue';
    import { RouterView ,RouterLink,useRouter} from 'vue-router';
    let newsList= reactive([
        {id:'001',title:'asdasd',content:'西蓝花'},
        {id:'002',title:'fsdfsd',content:'西红柿'},
        {id:'003',title:'aszxdzxcdasd',content:'土豆'},
        {id:'004',title:'qweqw',content:'蒜苗'},
    ])
    const router = useRouter()
    interface NewsInter{
        id:string,
        title:string,
        content:string
    }
    function showDetail(news:NewsInter){
        router.push({
                    name:'MyDetail',
                    params:{
                        id:news.id,
                        title:news.title,
                        content:news.content,
                    }
                });
    }
</script>

<style scoped>
.news {
  padding: 0 20px;
  display: flex;
  justify-content: space-between;
  height: 100%;
}

.news ul{
    margin-top:30px;
    /* list-style:none; */
    padding-left:10px;
}


.news li>a{
    font-size:18px;
    line-height:40px;
    text-decoration:none;
    color:#64967E;
    text-shadow:00 1px rgb(0,84,0);
}
.news li::marker{
    color:#64967E;
}
.news-content{
    width:70%;
    height:90%;
    border:1px solid;
    margin-top:20px;
    border-radius:10px;
}


</style>